

<!-- 199010128-冉炜业 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城手机板块</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/wrok02.css">
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <h2 class="top">手机
            <a href="#">查看更多</a>
        </h2>
        <!-- <template> -->
        <div class="cont">
            <ul class="left">
                <li>
                    <a href="#"><img src="images/ad1.png" alt=""></a>
                </li>
            </ul>
            <ul class="right">
                <li v-for="phone in phoneList">
                    <a href="#" v-if="phone.isOut">
                        <img width="160px" style="margin-bottom: 18px;" :src="phone.img" alt="">
                        <p class="title">{{ phone.title }}</p>
                        <p class="des">{{ phone.des }}</p>
                        <p class="price">{{ phone.price }}元起</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- </template> -->
    </div>
</body>

<script>
    const phoneList = {
        phoneList:
            [
                { id: '100082', img: 'images/phone1.png', title: 'Redmi K50 Pro', des: '2K直屏的狠旗舰', price: '2999', isOut: true },
                { id: '100083', img: 'images/phone2.png', title: 'Redmi K50', des: '2K直屏的狠旗舰', price: '2399', isOut: true },
                { id: '100084', img: 'images/phone3.png', title: 'Redmi K40S', des: '口碑真旗舰', price: '1799', isOut: true },
                { id: '100085', img: 'images/phone4.png', title: 'Redmi K50 电竞版', des: '全线拉满的冷血旗舰', price: '3299', isOut: true },
                { id: '100086', img: 'images/phone5.png', title: 'Xiaomi 12 Pro', des: '全新骁龙8|2K AMOLED屏幕', price: '4699', isOut: true },
                { id: '100087', img: 'images/phone6.png', title: 'Xiaomi 12', des: '全新骁龙8|5000万主摄', price: '3699', isOut: true },
                { id: '100088', img: 'images/phone7.png', title: 'Xiaomi 12X', des: '骁龙870|5000万主摄', price: '2999', isOut: true },
                { id: '100089', img: 'images/phone8.png', title: 'Xiaomi 11 青春活力版', des: '轻薄5G，内外皆出彩', price: '1899', isOut: true },
            ]
    }
    const vm = Vue.createApp({
        data() {
            return phoneList;
        },
    }).mount('#app');
</script>

</html>